diff options
Diffstat (limited to 'src/routes/player/[player]')
21 files changed, 1357 insertions, 19 deletions
diff --git a/src/routes/player/[player]/[profile]/+page.svelte b/src/routes/player/[player]/[profile]/+page.svelte index 247619d..8a3adbb 100644 --- a/src/routes/player/[player]/[profile]/+page.svelte +++ b/src/routes/player/[player]/[profile]/+page.svelte @@ -1,31 +1,31 @@ <script lang="ts"> import { inventoryIconMap, skyblockItemToUrl } from '$lib/minecraft/inventory' - import FarmingContests from '$lib/sections/FarmingContests.svelte' - import Leaderboards from '$lib/sections/Leaderboards.svelte' - import Achievements from '$lib/sections/Achievements.svelte' - import Inventories from '$lib/sections/Inventories.svelte' - import Collections from '$lib/sections/Collections.svelte' + import FarmingContests from './sections/FarmingContests.svelte' + import Leaderboards from './sections/Leaderboards.svelte' + import Achievements from './sections/Achievements.svelte' + import Inventories from './sections/Inventories.svelte' + import Collections from './sections/Collections.svelte' import { chooseDefaultBackground } from '$lib/backgrounds' import BackgroundImage from '$lib/BackgroundImage.svelte' import type { CleanMemberProfile } from '$lib/APITypes' import Username from '$lib/minecraft/Username.svelte' - import StatList from '$lib/sections/StatList.svelte' - import Auctions from '$lib/sections/Auctions.svelte' - import Infobox from '$lib/sections/Infobox.svelte' - import Minions from '$lib/sections/Minions.svelte' - import Essence from '$lib/sections/Essence.svelte' - import Slayers from '$lib/sections/Slayers.svelte' + import StatList from './sections/StatList.svelte' + import Auctions from './sections/Auctions.svelte' + import Infobox from './sections/Infobox.svelte' + import Minions from './sections/Minions.svelte' + import Essence from './sections/Essence.svelte' + import Slayers from './sections/Slayers.svelte' import type { MatcherFile } from 'skyblock-assets' - import Claimed from '$lib/sections/Claimed.svelte' + import Claimed from './sections/Claimed.svelte' import Collapsible from '$lib/Collapsible.svelte' - import Skills from '$lib/sections/Skills.svelte' + import Skills from './sections/Skills.svelte' import { generateInfobox } from '$lib/profile' - import Zones from '$lib/sections/Zones.svelte' - import Armor from '$lib/sections/Armor.svelte' - import Harp from '$lib/sections/Harp.svelte' - import Pets from '$lib/sections/Pets.svelte' - import Coop from '$lib/sections/Coop.svelte' - import Bank from '$lib/sections/Bank.svelte' + import Zones from './sections/Zones.svelte' + import Armor from './sections/Armor.svelte' + import Harp from './sections/Harp.svelte' + import Pets from './sections/Pets.svelte' + import Coop from './sections/Coop.svelte' + import Bank from './sections/Bank.svelte' import type { PageData } from './$types' import Header from '$lib/Header.svelte' import Emoji from '$lib/Emoji.svelte' diff --git a/src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte b/src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte new file mode 100644 index 0000000..74530d1 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/AccessoryBagUpgrades.svelte @@ -0,0 +1,100 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Emoji from '$lib/Emoji.svelte' + import ListItemWithIcon from '$lib/ListItemWithIcon.svelte' + import { cleanId, skyblockTime } from '$lib/utils' + + export let data: CleanMemberProfile + + $: bagData = data.member.accessoryBagUpgrades +</script> + +<span class="accessory-bag-upgrades"> + <h3>Upgrades</h3> + <div class="accessory-bag-info-text"> + <p>Purchased: <b>{bagData.upgrades.purchased}</b></p> + <p>Coins spent: <b>{bagData.upgrades.coinsSpent.toLocaleString()}</b></p> + <p>Extra slots: <b>{bagData.upgrades.extraSlots}</b></p> + </div> + + <h3>Powers</h3> + {#if bagData.powers.selected} + <p class="accessory-bag-info-text"> + Selected: <b>{cleanId(bagData.powers.selected)}</b> + </p> + {/if} + <ul> + {#each bagData.powers.list as power} + <li> + {#if bagData.powers.selected === power} + <b>{cleanId(power)}</b> + {:else} + {cleanId(power)} + {/if} + </li> + {/each} + </ul> + + <div class="tuning-templates"> + {#each bagData.tuningTemplates as template, template_index} + <div class="tuning-template"> + <h3>Template #{template_index + 1}</h3> + <div class="accessory-bag-info-text"> + {#each Object.entries(template) as [statName, statValue]} + <p>{cleanId(statName)}: <b>{statValue}</b></p> + {/each} + </div> + </div> + {/each} + </div> +</span> + +<style> + p, + ul { + margin: 0; + } + ul { + padding-left: 1.5em; + } + h3 { + margin: 0.5em 0 0 0; + } + + .accessory-bag-info-text { + color: var(--theme-darker-text); + } + .accessory-bag-info-text b { + color: var(--theme-main-text); + } + + .tuning-templates { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + margin-top: 1rem; + } + .tuning-template { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + } + .tuning-template h3 { + margin: 0; + } + + .accessory-bag-upgrades { + /* width: 5rem; */ + } + @media only screen and (min-width: 1160px) { + .accessory-bag-upgrades { + display: inline-grid; + position: relative; + top: -1.5em; + left: 0.5em; + } + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Achievements.svelte b/src/routes/player/[player]/[profile]/sections/Achievements.svelte new file mode 100644 index 0000000..92ba468 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Achievements.svelte @@ -0,0 +1,87 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Tooltip from '$lib/Tooltip.svelte' + export let data: CleanMemberProfile +</script> + +{#if data.member.achievements} + <h3> + Tiered + <span class="achievement-count"> + ({data.member.achievements.tiered.filter(a => a.amount).length}/{data.member.achievements + .tiered.length}) + </span> + </h3> + <ul> + {#each data.member.achievements.tiered as achievement} + <li class="achievement"> + <Tooltip> + <span slot="tooltip"> + {achievement.description} + </span> + + <span class:achievement-locked={achievement.amount === 0}> + {achievement.name}: {#if achievement.next} + <b class="achievement-amount">{achievement.amount}</b>/{achievement.next} + {:else} + <span class="achievement-amount achievement-amount-maxed">{achievement.amount}</span> + {/if} + </span> + </Tooltip> + </li> + {/each} + </ul> + + <h3> + Challenge + <span class="achievement-count"> + ({data.member.achievements.challenge.filter(a => a.unlocked).length}/{data.member.achievements + .challenge.length}) + </span> + </h3> + <ul> + {#each data.member.achievements.challenge as achievement} + <li class="achievement"> + <Tooltip> + <span slot="tooltip"> + {achievement.description} + </span> + + {#if achievement.unlocked} + <span> + {achievement.name} + </span> + {:else} + <span class="achievement-locked"> + {achievement.name} + </span> + {/if} + </Tooltip> + </li> + {/each} + </ul> +{/if} + +<style> + ul { + margin: 0; + padding-left: 1em; + } + + .achievement-locked { + opacity: 0.5; + } + + .achievement-count { + color: var(--theme-darker-text); + font-weight: normal; + } + + .achievement-amount { + opacity: 0.9; + } + .achievement-amount-maxed { + color: #0e0; + opacity: 1; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Armor.svelte b/src/routes/player/[player]/[profile]/sections/Armor.svelte new file mode 100644 index 0000000..285a898 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Armor.svelte @@ -0,0 +1,14 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Inventory from '$lib/minecraft/Inventory.svelte' + import type { MatcherFile } from 'skyblock-assets' + + export let data: CleanMemberProfile + export let pack: MatcherFile +</script> + +{#if data.member.inventories} + <span> + <Inventory items={data.member.inventories.armor} name="armor" groupLimit={1} {pack} /> + </span> +{/if} diff --git a/src/routes/player/[player]/[profile]/sections/Auctions.svelte b/src/routes/player/[player]/[profile]/sections/Auctions.svelte new file mode 100644 index 0000000..50d47b6 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Auctions.svelte @@ -0,0 +1,109 @@ +<!-- + @component + + A list of the player's past auctions, and their auction stats. +--> +<script lang="ts"> + import { cleanId, millisecondsToTime } from '$lib/utils' + import type { CleanMemberProfile, StatItem } from '$lib/APITypes' + import { fetchApi } from '$lib/api' + import type { MatcherFile } from 'skyblock-assets' + import Auction from '$lib/Auction.svelte' + + export let data: CleanMemberProfile + export let stats: StatItem[] + export let pack: MatcherFile + + let onlyThisProfile = true + + let auctions: any[] = [] + let loading = true + + let page = 0 + let totalPages: number | undefined = undefined + + async function updateAuctions() { + loading = true + const thisPage = page + page += 1 + const auctionsResponse = await fetchApi( + `playerauctions/${data.member.uuid}?page=${thisPage}`, + fetch + ).then(r => r.json()) + loading = false + auctions = [...auctions, ...auctionsResponse.auctions] + totalPages = auctionsResponse.pages + } + + updateAuctions() +</script> + +<div class="auction-stats-and-list-container"> + <ul> + {#each stats.sort((a, b) => b.value - a.value) as stat} + <li> + <span class="stat-name">{cleanId(stat.categorizedName)}:</span> + <span class="stat-value"> + {#if stat.unit === 'time'} + {millisecondsToTime(stat.value)} + {:else} + {stat.value.toLocaleString()} + {/if} + </span> + </li> + {/each} + </ul> + + <div class="player-auctions-list-container"> + {#if loading || auctions.length > 0} + <h3>Auctions sold</h3> + {/if} + {#if auctions.length > 0} + <div class="player-auctions-list"> + {#each auctions as auction} + {#if !onlyThisProfile || auction.sellerProfileUuid == data.profile.uuid} + <Auction {auction} {pack} /> + {/if} + {/each} + </div> + {#if !loading && page != totalPages} + <button on:click={updateAuctions}>Show more</button> + {/if} + {/if} + {#if loading} + Loading... + {/if} + </div> +</div> + +<style> + li { + position: relative; + } + ul { + padding-left: 1em; + margin-top: 0.5em; + width: max-content; + } + .auction-stats-and-list-container { + display: grid; + grid-template-columns: 1fr auto; + } + + @media (max-width: 600px) { + .auction-stats-and-list-container { + grid-template-columns: 1fr; + } + } + + .player-auctions-list { + display: flex; + flex-wrap: wrap; + column-gap: 0.5rem; + row-gap: 0.5rem; + } + .player-auctions-list-container { + margin-top: 0.5em; + margin-left: 0.5em; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Bank.svelte b/src/routes/player/[player]/[profile]/sections/Bank.svelte new file mode 100644 index 0000000..9bd2b8f --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Bank.svelte @@ -0,0 +1,89 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Tooltip from '$lib/Tooltip.svelte' + import ConditionalLink from '$lib/ConditionalLink.svelte' + import { + colorCodeCharacter, + formattingCodeToHtml, + millisecondsToTime, + removeFormattingCode, + } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#if data.profile.bank} + <div class="bank-main-current-balance"> + <p> + Current bank balance: + <span class="bank-main-current-balance-value"> + <b>{data.profile.bank.balance?.toLocaleString()}</b> coins + </span> + </p> + <p> + Purse: + <span class="bank-main-current-balance-value"> + <b>{data.member.purse.toLocaleString()}</b> coins + </span> + </p> + </div> + {#each data.profile.bank.history as transaction} + <div> + <span class="transaction-player"> + <ConditionalLink + href="/player/{removeFormattingCode(transaction.name)}" + isWrapped={transaction.name.startsWith(colorCodeCharacter)} + > + {@html formattingCodeToHtml(transaction.name)} + </ConditionalLink> + </span> + <Tooltip> + <span slot="tooltip"> + New balance: <b>{transaction.total.toLocaleString()}</b> + </span> + <span + class:difference-positive={transaction.change > 0} + class:difference-negative={transaction.change < 0} + > + {transaction.change > 0 + ? '+' + transaction.change.toLocaleString() + : transaction.change.toLocaleString()} + </span> + </Tooltip> + + <span class="transaction-timeago"> + {millisecondsToTime(Date.now() - transaction.timestamp)} ago + </span> + </div> + {/each} +{/if} + +<style> + .difference-positive { + color: #0f0; + } + .difference-negative { + color: red; + } + + .transaction-timeago { + color: var(--theme-darker-text); + } + + .transaction-player { + font-family: Minecraft, 'Atkinson Hyperlegible', sans-serif; + font-size: 0.8em; + } + + .bank-main-current-balance { + margin: 0.5em 0; + color: var(--theme-darker-text); + } + + .bank-main-current-balance-value { + color: var(--theme-main-text); + } + p { + margin: 0; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Claimed.svelte b/src/routes/player/[player]/[profile]/sections/Claimed.svelte new file mode 100644 index 0000000..8f44796 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Claimed.svelte @@ -0,0 +1,33 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, millisecondsToTime, toTitleCase } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#if data.member.claimed && data.member.claimed.length > 0} + <ul> + {#each data.member.claimed as claimed} + <li> + <b class="claimed-item-name">{toTitleCase(cleanId(claimed.id))}</b> + <span class="claimed-item-timestamp"> + {millisecondsToTime(Date.now() - claimed.timestamp)} ago + </span> + </li> + {/each} + </ul> +{/if} + +<style> + p { + margin: 0; + } + + ul { + margin: 0.5em 0; + } + + .claimed-item-timestamp { + color: var(--theme-darker-text); + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Collections.svelte b/src/routes/player/[player]/[profile]/sections/Collections.svelte new file mode 100644 index 0000000..4baa660 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Collections.svelte @@ -0,0 +1,62 @@ +<script lang="ts"> + import type { CleanMemberProfile, Collection } from '$lib/APITypes' + import { skyblockItemToUrl } from '$lib/minecraft/inventory' + import ListItemWithIcon from '$lib/ListItemWithIcon.svelte' + import type { MatcherFile } from 'skyblock-assets' + import Tooltip from '$lib/Tooltip.svelte' + import { cleanId } from '$lib/utils' + + export let data: CleanMemberProfile + export let pack: MatcherFile + + const categories: Record<string, Collection[]> = {} + if (data.member.collections) + for (const collection of data.member.collections) { + if (!categories[collection.category]) categories[collection.category] = [] + categories[collection.category].push(collection) + } +</script> + +{#if data.member.collections} + {#each Object.keys(categories).sort() as categoryName} + {@const collections = categories[categoryName]} + <h3>{cleanId(categoryName)}</h3> + <ul> + {#each collections as collection} + <ListItemWithIcon + src={skyblockItemToUrl(collection.name, pack)} + alt={cleanId(collection.name)} + > + <Tooltip> + <span slot="tooltip"> + Amount: {collection.amount.toLocaleString()} + </span> + {cleanId(collection.name)} + <span class="coll-level">{collection.level}</span> + </Tooltip> + </ListItemWithIcon> + {/each} + </ul> + {/each} +{/if} + +<style> + ul { + margin: 0; + display: flex; + flex-wrap: wrap; + width: fit-content; + /* this ensures there's at most 2 lines */ + max-width: 30em; + } + + ul > :global(li) { + width: 12em; + height: 1.5em; + text-overflow: ellipsis; + } + + h3 { + margin: 0.5em 0 0.5em 0.5em; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Coop.svelte b/src/routes/player/[player]/[profile]/sections/Coop.svelte new file mode 100644 index 0000000..ff858f1 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Coop.svelte @@ -0,0 +1,79 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Username from '$lib/minecraft/Username.svelte' + import { millisecondsToTime } from '$lib/utils' + export let data: CleanMemberProfile + + $: isProfileCreator = data.member.coopInvitation?.invitedBy?.uuid == data.member.uuid +</script> + +{#if data.member.coopInvitation} + <div class="info-text primary-info-text"> + {#if isProfileCreator} + <p><b class="info-text-value">Created co-op</b></p> + {:else} + <p> + Invited by {#if data.member.coopInvitation.invitedBy} + <Username player={data.member.coopInvitation.invitedBy} prefix /> + {:else} + <b>Unknown player</b> + {/if} + </p> + {/if} + <p> + {isProfileCreator ? 'Began creation' : 'Invited'}: + <span class="info-text-value coop-invited-timeago"> + <b>{millisecondsToTime(Date.now() - data.member.coopInvitation.invitedTimestamp)}</b> ago + </span> + </p> + {#if data.member.coopInvitation.acceptedTimestamp} + <p> + {isProfileCreator ? 'Finished creation' : 'Accepted invite'}: + <span class="info-text-value coop-accepted-invite-after"> + after <b> + {millisecondsToTime( + data.member.coopInvitation.acceptedTimestamp - + data.member.coopInvitation.invitedTimestamp + )} + </b> + </span> + </p> + {/if} + </div> + <h3>Members</h3> + {#each data.profile.members.filter(m => !m.left) as player} + <span class="member"> + <Username {player} headType="2d" hyperlinkToProfile /> + </span> + {/each} + {#if data.profile.members.filter(m => m.left).length > 0} + <h3 class="former-members-title">Former members</h3> + {#each data.profile.members.filter(m => m.left) as player} + <span class="member"> + <Username {player} headType="2d" hyperlinkToProfile={data.profile.uuid} /> + </span> + {/each} + {/if} +{/if} + +<style> + p { + margin: 0; + } + .primary-info-text { + margin: 0.5em 0; + } + .info-text { + color: var(--theme-darker-text); + } + .info-text .info-text-value { + color: var(--theme-main-text); + } + + .member { + display: block; + } + .former-members-title { + margin-top: 0.5rem; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Essence.svelte b/src/routes/player/[player]/[profile]/sections/Essence.svelte new file mode 100644 index 0000000..244dbcd --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Essence.svelte @@ -0,0 +1,27 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toTitleCase } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#if data.member.essence.types.length > 0} + <ul> + {#each data.member.essence.types as essenceType} + <li> + {toTitleCase(cleanId(essenceType.id))}: + <b class="essence-type-amount">{essenceType.amount.toLocaleString()}</b> + </li> + {/each} + </ul> +{/if} + +<style> + p { + margin: 0; + } + + ul { + margin: 0.5em 0; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/FarmingContests.svelte b/src/routes/player/[player]/[profile]/sections/FarmingContests.svelte new file mode 100644 index 0000000..8eef53d --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/FarmingContests.svelte @@ -0,0 +1,62 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Emoji from '$lib/Emoji.svelte' + import ListItemWithIcon from '$lib/ListItemWithIcon.svelte' + import { skyblockItemToUrl } from '$lib/minecraft/inventory' + import { skyblockTime } from '$lib/utils' + + export let data: CleanMemberProfile + + let cachedItemUrls: Record<string, string> = {} + function cachedSkyblockItemToUrl(item: string) { + if (!cachedItemUrls[item]) cachedItemUrls[item] = skyblockItemToUrl(item) + return cachedItemUrls[item] + } +</script> + +<div class="info-text primary-info-text"> + <p>Talked to Jacob: <Emoji value={data.member.farmingContests.talkedToJacob ? '✅' : '❌'} /></p> +</div> +<div class="farming-contests-list"> + {#each data.member.farmingContests.list as farmingContest} + <div class="farming-contest"> + <p class="farming-contest-date"> + {new Date( + skyblockTime(farmingContest.year, farmingContest.month, farmingContest.day) + ).toUTCString()} + </p> + <ul> + {#each farmingContest.crops as crop} + <ListItemWithIcon src={cachedSkyblockItemToUrl(crop.item)}> + <b>{crop.amount.toLocaleString()}</b> collected + {#if crop.position} + <span class="farming-contest-item-placement"> + (#{crop.position}/{crop.participants}) + </span> + {/if} + </ListItemWithIcon> + {/each} + </ul> + </div> + {/each} +</div> + +<style> + p, + ul { + margin: 0; + } + + .primary-info-text { + margin: 0.5em 0; + } + + .info-text { + color: var(--theme-darker-text); + } + + .farming-contest-item-placement, + .farming-contest-date { + color: var(--theme-darker-text); + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Harp.svelte b/src/routes/player/[player]/[profile]/sections/Harp.svelte new file mode 100644 index 0000000..6a5c9cc --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Harp.svelte @@ -0,0 +1,72 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import Emoji from '$lib/Emoji.svelte' + import { cleanId, millisecondsToTime, toTitleCase } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +<div class="info-text primary-info-text"> + <p>Claimed Melody's hair: <Emoji value={data.member.harp.claimedMelodysHair ? '✅' : '❌'} /></p> + {#if data.member.harp.selected} + <p> + Selected song: + <b class="info-text-value">{toTitleCase(cleanId(data.member.harp.selected.id))}</b> + <span class="harp-selection-timeago"> + {millisecondsToTime(Date.now() - data.member.harp.selected.timestamp)} ago + </span> + </p> + {/if} +</div> +<div class="harp-songs-list"> + {#each data.member.harp.songs as song} + <div class="harp-song" class:selected-harp-song={song.id === data.member.harp.selected?.id}> + <h3>{toTitleCase(cleanId(song.id))}</h3> + <div class="info-text"> + {#if song.completions} + <p>Completions: <b class="info-text-value">{song.completions}</b></p> + {/if} + {#if song.perfectCompletions} + <p>Perfect completions: <b class="info-text-value">{song.perfectCompletions}</b></p> + {:else} + <p>Progress: <b class="info-text-value">{Math.floor(song.progress * 100)}%</b></p> + {/if} + </div> + </div> + {/each} +</div> + +<style> + p { + margin: 0; + } + + .primary-info-text { + margin: 0.5em 0; + } + + .info-text { + color: var(--theme-darker-text); + } + .info-text .info-text-value { + color: var(--theme-main-text); + } + + .harp-songs-list { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + } + .harp-song { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + width: 12em; + } + .selected-harp-song { + border: 1px solid rgba(255, 255, 255, 0.2); + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Infobox.svelte b/src/routes/player/[player]/[profile]/sections/Infobox.svelte new file mode 100644 index 0000000..f8d2889 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Infobox.svelte @@ -0,0 +1,83 @@ +<script lang="ts"> + import { generateInfobox } from '$lib/profile' + import Username from '$lib/minecraft/Username.svelte' + import Emoji from '$lib/Emoji.svelte' + + export let data +</script> + +<div id="infobox-container"> + <div id="infobox"> + <h2> + <Username player={data.member} prefix /> ({data.member.left + ? 'Removed' + : data.member.profileName}) + </h2> + {#each generateInfobox(data) as item} + <!-- hack so fairy souls is clickable to get to the leaderboards --> + {#if item.includes('Fairy souls')} + <a href="/leaderboards/fairy_souls" class="fairy-souls-leaderboard" + ><p><Emoji value={item} /></p></a + > + {:else} + <p><Emoji value={item} /></p> + {/if} + {/each} + </div> + <div id="infobox-extra"> + <p>Player UUID:</p> + <b><code>{data.member.uuid}</code></b> + <p>Profile UUID:</p> + <b><code>{data.profile.uuid}</code></b> + </div> +</div> + +<style> + #infobox-container { + float: right; + max-width: 95%; + width: 20em; + } + #infobox { + background-color: rgba(20, 20, 20, 0.4); + padding: 1em; + margin-top: 2em; + border-radius: 0.5em; + box-shadow: 0 0 1em #000; + } + #infobox-extra { + opacity: 0.5; + margin-top: 0.5rem; + } + #infobox-extra p { + margin: 0; + } + p { + margin: 0 0 0.25em 0; + } + .fairy-souls-leaderboard { + color: inherit; + text-decoration: none; + } + @media only screen and (max-width: 600px) { + #infobox { + position: relative; + right: -2em; + margin-top: 0; + } + } + @media only screen and (max-width: 550px) { + #infobox { + position: unset; + box-shadow: none; + float: none; + border: 1px solid var(--theme-lighter-background); + } + } + @media only screen and (max-width: 460px) { + #infobox-container { + max-width: 100%; + float: left; + } + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Inventories.svelte b/src/routes/player/[player]/[profile]/sections/Inventories.svelte new file mode 100644 index 0000000..1dd7d28 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Inventories.svelte @@ -0,0 +1,105 @@ +<script lang="ts"> + import { inventoryIconMap, skyblockItemToUrl, type Item } from '$lib/minecraft/inventory' + import Inventory from '$lib/minecraft/Inventory.svelte' + import type { MatcherFile } from 'skyblock-assets' + import { cleanId } from '$lib/utils' + import AccessoryBagUpgrades from './AccessoryBagUpgrades.svelte' + import type { CleanMemberProfile } from '$lib/APITypes' + + export let data: CleanMemberProfile + export let pack: MatcherFile + + let displayingInventories: string[] = [] + for (const inventoryName in data.member.inventories) + if (inventoryName !== 'armor') displayingInventories.push(inventoryName) + + let selectedInventoryName: string = displayingInventories[0] +</script> + +{#if displayingInventories.length > 1} + <div id="inventory-tabs"> + {#each displayingInventories as inventoryName} + <button + class="inventory-tab" + class:inventory-tab-active={inventoryName === selectedInventoryName} + on:click={() => (selectedInventoryName = inventoryName)} + > + {#if inventoryName in inventoryIconMap} + <img + class="inventory-tab-icon" + loading="lazy" + src={skyblockItemToUrl(inventoryIconMap[inventoryName], pack, 50)} + alt={cleanId(inventoryName)} + /> + {/if} + <span class="inventory-tab-name">{cleanId(inventoryName)}</span> + </button> + {/each} + </div> +{/if} +{#if data.member.inventories} + {#each displayingInventories as inventoryName} + {#if inventoryName === selectedInventoryName} + <span id={inventoryName} class="inventory-content"> + <Inventory items={data.member.inventories[inventoryName]} {pack} name={inventoryName} /> + </span> + {#if inventoryName == 'accessory_bag'} + <AccessoryBagUpgrades {data} /> + {/if} + {/if} + {/each} +{/if} + +<style> + #inventory-tabs { + margin-bottom: 1em; + overflow: hidden; + border-radius: 1em; + max-width: 40em; + /* box-shadow: 0 0 1em #000; */ + } + .inventory-tab { + /* background-color: var(--theme-lighter-background); */ + background-color: rgba(20, 20, 20, 0.4); + color: var(--theme-main-text); + border: none; + border-radius: 0; + padding: 0 0.5em; + cursor: pointer; + transition-duration: 200ms; + height: 2.5em; + vertical-align: middle; + } + .inventory-tab-icon { + height: 1.5em; + width: 1.5em; + vertical-align: text-bottom; + position: relative; + top: 0.1em; + image-rendering: crisp-edges; + image-rendering: pixelated; + } + .inventory-tab-name { + vertical-align: text-top; + } + .inventory-tab:hover, + .inventory-tab-active { + background-color: rgba(40, 40, 40, 0.9); + } + + .inventory-content { + display: inline-grid; + } + + @media only screen and (max-width: 480px) { + .inventory-content :global(.item) { + /* there's no good way to override the existing 32px size without !important :( */ + font-size: 24px !important; + } + } + @media only screen and (max-width: 350px) { + .inventory-content :global(.item) { + font-size: 16px !important; + } + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Leaderboards.svelte b/src/routes/player/[player]/[profile]/sections/Leaderboards.svelte new file mode 100644 index 0000000..817f59a --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Leaderboards.svelte @@ -0,0 +1,46 @@ +<script lang="ts"> + import { fetchApi } from '$lib/api' + + import type { CleanMemberProfile } from '$lib/APITypes' + import Emoji from '$lib/Emoji.svelte' + import { cleanId, formatNumberFromUnit } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#await fetchApi(`player/${data.member.uuid}/${data.profile.uuid}/leaderboards`, fetch).then( r => r.json() )} + Loading... +{:then leaderboards} + {#if leaderboards.length > 0} + <ul> + {#each leaderboards as leaderboard} + <li class="leaderboard-item"> + <a href="/leaderboard/{leaderboard.name}" class="leaderboard-item-anchor"> + {leaderboard.positionIndex + 1}) <b>{cleanId(leaderboard.name)}</b>: {formatNumberFromUnit( + leaderboard.value, + leaderboard.unit ?? null + )} + </a> + </li> + {/each} + </ul> + {:else} + <p>This player isn't in any leaderboards. <Emoji value="😦" /></p> + {/if} +{/await} + +<style> + .leaderboard-item-anchor { + color: inherit; + } + .leaderboard-item { + list-style-type: none; + } + ul { + padding-left: 0; + margin-top: 0.5em; + } + p { + margin: 0.5rem 0; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Minions.svelte b/src/routes/player/[player]/[profile]/sections/Minions.svelte new file mode 100644 index 0000000..856d8f0 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Minions.svelte @@ -0,0 +1,40 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toRomanNumerals } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +<p class="unique-minions-text"> + Unique minions: + <span class="minions-fraction"> + <b>{data.profile.minionCount}</b>/{data.profile.maxUniqueMinions} + </span> +</p> +<table> + {#each data.profile.minions as minion} + <tr> + <th>{cleanId(minion.name)}</th> + {#each minion.levels as unlocked, i} + <td class="minion-table-item" class:unlocked> + {toRomanNumerals(i + 1)} + </td> + {/each} + </tr> + {/each} +</table> + +<style> + .unique-minions-text { + color: var(--theme-darker-text); + } + .minions-fraction { + color: var(--theme-main-text); + } + .minion-table-item:not(.unlocked) { + opacity: 0.2; + } + .minion-table-item.unlocked { + color: #3e3; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Pets.svelte b/src/routes/player/[player]/[profile]/sections/Pets.svelte new file mode 100644 index 0000000..7f660c4 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Pets.svelte @@ -0,0 +1,79 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toRomanNumerals, toTitleCase } from '$lib/utils' + + export let data: CleanMemberProfile + + // we convert it to a set to remove duplicates + const petsAcquiredCount = new Set(data.member.pets.list.map(p => p.id)).size + const totalPetsCount = data.member.pets.missingIds.length + petsAcquiredCount +</script> + +{#if data.member.zones} + <p class="zones-visited-text"> + Pets acquired: + <span class="zones-visited-number"> + <b>{petsAcquiredCount}</b>/{totalPetsCount} + </span> + </p> + <div class="pets-list"> + {#each data.member.pets.list as pet} + <div class="individual-pet-data"> + <h3>{cleanId(pet.id.toLowerCase())}</h3> + <p>Level: <b>{pet.level.toLocaleString()}</b></p> + <p>Tier: <b>{toTitleCase(pet.tier)}</b></p> + {#if pet.item} + <p>Item: <b>{pet.item.display.name}</b></p> + {/if} + </div> + {/each} + </div> + {#if data.member.pets.missingIds.length > 0} + <h3 class="missing-pets-title">Missing</h3> + <ul> + {#each data.member.pets.missingIds as petId} + <li class="missing-pet">{toTitleCase(cleanId(petId.toLowerCase()))}</li> + {/each} + </ul> + {/if} +{/if} + +<style> + p { + margin: 0; + } + .zones-visited-text { + color: var(--theme-darker-text); + margin: 0.5em 0; + } + .zones-visited-number { + color: var(--theme-main-text); + } + .missing-pet { + opacity: 0.5; + } + .individual-pet-data { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + width: 9rem; + } + + .pets-list { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + } + + .missing-pets-title { + margin-top: 1rem; + } + + ul { + padding-left: 1em; + margin: 0; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Skills.svelte b/src/routes/player/[player]/[profile]/sections/Skills.svelte new file mode 100644 index 0000000..8fc5aaf --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Skills.svelte @@ -0,0 +1,87 @@ +<script lang="ts"> + import Emoji from '$lib/Emoji.svelte' + + import Tooltip from '$lib/Tooltip.svelte' + import { cleanId, formatNumber } from '$lib/utils' + + const skillImages = { + runecrafting: '/skill-icons/runecrafting.webp', + alchemy: '/skill-icons/herblore.webp', + combat: '/skill-icons/attack.webp', + enchanting: '/skill-icons/magic.webp', + foraging: '/skill-icons/woodcutting.webp', + mining: '/skill-icons/mining.webp', + taming: '/skill-icons/hunter.webp', + farming: '/skill-icons/farming.webp', + fishing: '/skill-icons/fishing.webp', + carpentry: '/skill-icons/construction.webp', + social: '/skill-icons/agility.webp', + } + + export let data +</script> + +{#if !data.member.skills.apiEnabled} + <p class="skills-api-warning"> + <Emoji value="⚠" /> Skills API is disabled for this profile, so the values shown may be inaccurate. + </p> +{/if} +<ul> + {#each data.member.skills.list as skill} + <li + class="list-item-with-icon" + style="background: url({skillImages[skill.id]}) 0 0/1em no-repeat" + > + <Tooltip> + <span slot="tooltip"> + {#if skill.levelXpRequired !== null} + {Math.round((skill.levelXp / skill.levelXpRequired) * 100)}% to next level, {Math.round( + skill.levelXp + ).toLocaleString()}/{formatNumber(skill.levelXpRequired, 3)} xp + {:else} + {Math.round(skill.levelXp).toLocaleString()} extra xp + {/if} + </span> + <span> + {cleanId(skill.id)} + <span class="skill-level" class:skill-maxed={skill.level === skill.maxLevel}> + {skill.level} + </span> + </span> + </Tooltip> + </li> + {/each} +</ul> + +<style> + .skill-level { + opacity: 0.9; + } + .skill-maxed { + color: #0e0; + opacity: 1; + } + .list-item-with-icon { + list-style: none; + padding-left: 1.2em; + position: relative; + right: 1.2em; + image-rendering: crisp-edges; + image-rendering: pixelated; + } + + .skills-api-warning { + margin-top: 0; + } + + ul { + margin-top: 0; + display: flex; + flex-wrap: wrap; + max-width: 30em; + } + ul > li { + width: 10em; + margin: 0.25em 0.25em 0 0; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Slayers.svelte b/src/routes/player/[player]/[profile]/sections/Slayers.svelte new file mode 100644 index 0000000..40fa67d --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Slayers.svelte @@ -0,0 +1,74 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId, toRomanNumerals } from '$lib/utils' + + export let data: CleanMemberProfile +</script> + +{#if data.member.slayers} + <div class="slayer-info-text total-slayer-info-text"> + <p>Xp: <b>{data.member.slayers.xp}</b></p> + <p>Kills: <b>{data.member.slayers.kills}</b></p> + </div> + <div class="slayers-list"> + {#each data.member.slayers.bosses as slayer} + <div class="individual-slayer-data"> + <h3>{slayer.name ? cleanId(slayer.name) : cleanId(slayer.rawName)}</h3> + <div class="slayer-info-text"> + <p>Xp: <b>{slayer.xp.toLocaleString()}</b></p> + <p>Level: <b>{slayer.level}</b></p> + </div> + <table> + <tr> + {#each slayer.tiers as tier} + <th>Tier {toRomanNumerals(tier.tier)}</th> + {/each} + </tr> + <tr> + {#each slayer.tiers as tier} + <td class="slayer-tier-kills"> + {tier.kills.toLocaleString()} + </td> + {/each} + </tr> + </table> + </div> + {/each} + </div> +{/if} + +<style> + p { + margin: 0; + } + + .total-slayer-info-text { + margin: 0.5em 0; + } + + .slayer-tier-kills { + text-align: center; + } + + .slayer-info-text { + color: var(--theme-darker-text); + } + .slayer-info-text b { + color: var(--theme-main-text); + } + + .individual-slayer-data { + border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(0, 0, 0, 0.1); + padding: 0.75em; + border-radius: 1em; + } + + .slayers-list { + display: flex; + flex-wrap: wrap; + max-width: 40rem; + column-gap: 0.5rem; + row-gap: 0.5rem; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/StatList.svelte b/src/routes/player/[player]/[profile]/sections/StatList.svelte new file mode 100644 index 0000000..38604d7 --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/StatList.svelte @@ -0,0 +1,48 @@ +<!-- + @component + + A sorted list of a user's stats, with the total sometimes being at the top. +--> +<script lang="ts"> + import { cleanId, millisecondsToTime } from '$lib/utils' + import type { StatItem } from '$lib/APITypes' + + export let stats: StatItem[] +</script> + +<ul> + {#each stats.sort((a, b) => b.value - a.value) as stat} + <li class:total-stat={stat.categorizedName === 'total'}> + <span class="stat-name">{cleanId(stat.categorizedName)}:</span> + <span class="stat-value"> + {#if stat.unit === 'time'} + {millisecondsToTime(stat.value)} + {:else} + {stat.value.toLocaleString()} + {/if} + </span> + </li> + {/each} +</ul> + +<style> + .total-stat .stat-name { + color: var(--theme-darker-text); + } + .total-stat .stat-value { + font-weight: bold; + } + + .total-stat { + list-style-type: none; + padding: 0 0 0.5em 0; + right: 1em; + } + li { + position: relative; + } + ul { + margin-top: 0.5em; + padding-left: 1em; + } +</style> diff --git a/src/routes/player/[player]/[profile]/sections/Zones.svelte b/src/routes/player/[player]/[profile]/sections/Zones.svelte new file mode 100644 index 0000000..f7e993b --- /dev/null +++ b/src/routes/player/[player]/[profile]/sections/Zones.svelte @@ -0,0 +1,42 @@ +<script lang="ts"> + import type { CleanMemberProfile } from '$lib/APITypes' + import { cleanId } from '$lib/utils' + + export let data: CleanMemberProfile + + let zonesVisitedCount = data.member.zones ? data.member.zones?.filter(z => z.visited).length : 0 +</script> + +{#if data.member.zones} + <p class="zones-visited-text"> + Zones visited: + <span class="zones-visited-number"> + <b>{zonesVisitedCount}</b>/{data.member.zones.length} + </span> + </p> + <ul> + {#each data.member.zones.filter(z => z.visited) as zone} + <li>{cleanId(zone.name)}</li> + {/each} + {#each data.member.zones.filter(z => !z.visited) as zone} + <li class="unvisited-zone">{cleanId(zone.name)}</li> + {/each} + </ul> +{/if} + +<style> + .zones-visited-text { + color: var(--theme-darker-text); + margin: 0.5em 0; + } + .zones-visited-number { + color: var(--theme-main-text); + } + .unvisited-zone { + opacity: 0.5; + } + ul { + padding-left: 1em; + margin: 0; + } +</style> |